<template>
  <div class="jsb">
    <el-collapse
      v-model="activeNames"
      @change="handleChange"
      style="margin-top: 10px"
    >
      <el-collapse-item name="1">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px"
              >严重精神障碍个人信息补充表</span
            >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              style="position: absolute; right: 8%; margin-top: 8px"
              @click.stop="goto_open('严重精神障碍个人信息补充表')"
              >新增随访</el-button
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
            v-loading="isLoading"
          >
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="createtime" label="创建时间" width="100">
              <template slot-scope="scope">
                {{ scope.row.createtime | time }}
              </template>
            </el-table-column>
            <el-table-column prop="updatetime" label="更新时间" width="100">
              <template slot-scope="scope">
                {{ scope.row.updatetime | time }}
              </template>
            </el-table-column>
            <el-table-column prop="visitDate" label="随访时间" width="100">
              <template slot-scope="scope">
                {{ scope.row.visitDate | time }}
              </template>
            </el-table-column>
            <el-table-column prop="executorName" label="随访医生">
            </el-table-column>
            <el-table-column prop="unitName" label="随访机构">
            </el-table-column>
            <el-table-column prop="date" label="来源">
              <template>公卫</template>
            </el-table-column>
            <el-table-column prop="date" label="随访项目">
              <template>严重精神障碍个人信息补充</template>
            </el-table-column>
            <el-table-column prop="visitMode" label="随访方式">
              <template slot-scope="scope">
                {{ scope.row.visitMode | visitMode }}
              </template>
            </el-table-column>
            <el-table-column prop="date" label="随访照片">
              <template slot-scope="scope">
                {{ scope.row.visitScenePhoto }}
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="280"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <!-- <el-button
                    type="primary"
                    plain
                    size="mini"
                    style="background-color: #fff; color: rgb(47, 160, 254)"
                    >切换类型</el-button
                  > -->
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  @click="up_info(scope.row,'严重精神障碍个人信息补充表')"
                  >修改</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  @click="del_info(scope.row.id,1)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px"
              >严重精神障碍患者随访服务</span
            >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              style="position: absolute; right: 8%; margin-top: 8px"
              @click.stop="goto_open('严重精神障碍患者随访服务记录表')"
              >新增随访</el-button
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData2"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
            v-loading="isLoading"
          >
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="createtime" label="创建时间" width="100">
              <template slot-scope="scope">
                {{ scope.row.createtime | time }}
              </template>
            </el-table-column>
            <el-table-column prop="updatetime" label="更新时间" width="100">
              <template slot-scope="scope">
                {{ scope.row.updatetime | time }}
              </template>
            </el-table-column>
            <el-table-column prop="visitDate" label="随访时间" width="100">
              <template slot-scope="scope">
                {{ scope.row.visitDate | time }}
              </template>
            </el-table-column>
            <el-table-column prop="executorName" label="随访医生">
            </el-table-column>
            <el-table-column prop="unitName" label="随访机构">
            </el-table-column>
            <el-table-column prop="date" label="来源">
              <template>公卫</template>
            </el-table-column>
            <el-table-column prop="date" label="随访项目">
              <template>严重精神障碍个人信息补充</template>
            </el-table-column>
            <el-table-column prop="visitMode" label="随访方式">
              <template slot-scope="scope">
                {{ scope.row.visitMode | visitMode }}
              </template>
            </el-table-column>
            <el-table-column prop="date" label="随访照片">
              <template slot-scope="scope">
                {{ scope.row.visitScenePhoto }}
              </template>
            </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="280"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <!-- <el-button
                    type="primary"
                    plain
                    size="mini"
                    style="background-color: #fff; color: rgb(47, 160, 254)"
                    >切换类型</el-button
                  > -->
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  @click="up_info(scope.row,'严重精神障碍患者随访服务记录表')"
                  >修改</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  @click="del_info(scope.row.id,2)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <div>
            <i
              class="el-icon-document"
              style="font-size: 22px; margin-right: 10px"
            ></i>
            <span style="font-weight: 900; font-size: 16px"
              >严重精神障碍患者失访记录</span
            >
          </div>
        </template>
        <div>
          <el-table
            :data="tableData3"
            style="width: 100%; margin-top: 15px"
            :header-cell-style="{
              color: '#000',
              backgroundColor: 'rgb(222,234,255)',
            }"
            height="250"
          >
            <el-table-column prop="date" label="序号"> </el-table-column>
            <el-table-column prop="date" label="创建时间"> </el-table-column>
            <el-table-column prop="date" label="失访日期"> </el-table-column>
            <el-table-column prop="date" label="随访医生"> </el-table-column>
            <el-table-column prop="date" label="随访机构"> </el-table-column>
            <el-table-column prop="date" label="来源"> </el-table-column>
            <el-table-column prop="date" label="失访原因"> </el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="220"
              align="center"
            >
              <template slot-scope="">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >下载</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >预览</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  style="background-color: #fff; color: rgb(47, 160, 254)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 弹层开始 -->
    <el-dialog
      :title="isTitle"
      :visible.sync="dialogVisible"
      width="96%"
      style="margin-top: -10vh"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="height: 65vh; overflow: auto">
        <jsbgrxx ref="child" v-if="isTitle == '严重精神障碍个人信息补充表'"></jsbgrxx>
        <jsbsf ref="child" v-else></jsbsf>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
        <el-button type="primary" @click="btn_OK"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!-- 弹层结束 -->
  </div>
</template>
      
      <script>
import jsbgrxx from "@/views/dialog_info/jsbgrxx.vue"; // 严重精神障碍个人信息补充表
import jsbsf from "@/views/dialog_info/jsbsf.vue"; // 严重精神障碍患者随访服务记录表
export default {
  components: {
    jsbgrxx,
    jsbsf,
  },
  data() {
    return {
      activeNames: [],
      tableData3: [],
      tableData: [],
      tableData2:[],
      dialogVisible: false,
      isTitle: "",
      isLoading:false
    };
  },
  filters: {
    visitMode(id) {
      var toS = "";
      if (id == 1) {
        toS = "门诊";
      }
      if (id == 2) {
        toS = "家庭";
      }
      if (id == 3) {
        toS = "电话";
      }
      return toS;
    },
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
  },
  mounted(){
    this.getList()
  },
  methods: {
    handleChange(val) {
    },
    goto_open(title) {
      this.isTitle = title;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.child.clear_info();
    },
    getList() {
      this.tableData = [];
      var data = {
        idNo: localStorage.getItem('idCard'),
      };
      this.$post("/mentalDiseaseInfo/list?idNo=" + data.idNo).then((res) => {
        this.tableData = res.data;
      });
      this.$post("/mentalDiseaseVisit/list?idNo=" + data.idNo).then((res) => {
        this.tableData2 = res.data;
      });
    },
    up_info(item,title) {
      var init = JSON.stringify(item);
      var body = JSON.parse(init);
      body.symptoms = body.symptoms
        ? [...body.symptoms.toString()]
        : [];
        body.dangerousAct = body.dangerousAct
        ? [...body.dangerousAct.toString()]
        : [{}];
        // 
        body.symptoms = body.symptoms
        ? [...body.symptoms.toString()]
        : [{}];
        body.recovery = body.recovery
        ? [...body.recovery.toString()]
        : [{}];
      this.goto_open(title);
      setTimeout((_) => {
        this.$refs.child.getInfo(body);
      }, 100);
    },
    del_info(id,flag) {
      if(flag == 1){
        this.$post("/mentalDiseaseInfo/delete?id=" + id).then((res) => {
        this.getList();
      });
      }
      if(flag == 2){
        this.$post("/mentalDiseaseVisit/delete?id=" + id).then((res) => {
        this.getList();
      });
      }
      
    },
    btn_OK() {
      this.isLoading = true;
      this.$refs.child.btn_ok();
      this.handleClose();
      setTimeout((_) => {
        this.getList();
        this.isLoading = false;
      }, 600);
    },
  },
};
</script>
      
      <style lang="scss" scoped>
.jsb {
}
</style>